<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>空明物联网服务平台</title>
    <link rel="stylesheet" href="/static/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/css/base.css" />
</head>

<body>
    <div class="container-fluid">

        <div class="form-inline">
            <br />
            <input class="form-control" type="text" id="query" placeholder="设备名称、设备UUID、SN码" style=" width: 320px;">
            <select class="form-control" id="almtype" style=" width:100px;">
                <option value="0">全部</option>
                <option value="1">恢复</option>
                <option value="2">离线</option>
            </select>
            <button type="button" id="search" class="btn btn-primary">搜索</button>
        </div>
        <hr />
        <table class="table table-hover">
            <thead>
                <tr>
                    <th>设备名称</th>
                    <th>告警类型</th>
                    <th>告警时间</th>
                    <th>告警详情</th>
                </tr>
            </thead>
            <tbody id="result">
            </tbody>
        </table>
    </div>

    <script src="/static/js/jquery-2.1.4.min.js"></script>
    <script src="/static/js/base.js?version=1.0.0"></script>
    <script>
        var dones = false;
        var page = 1;
        var limit = 25;
        var almtype = 0

        $(document).ready(function(){
            getDataSet(page, limit);
        });
        

        function getDataSet(page, limit, almtype=0, query='') {
            var aDataSet;
            new AjaxRequest({
                type: "get",
                url: getServiceURL('alarmlist'),
                param: {
                    'page': page,
                    'limit': limit,
                    'almtype': almtype,
                    'query': query,
                },
                callBack: function (res) {
                    if (res.code == 0) {
                        var data = res.data.alarm;
                        var trHtml
                        trHtml = ''
                        for (var i = 0; i < data.length; i++) {

                            var almtype;
                            if (data[i].almtype == 1) {
                                almtype = "恢复";
                            }
                            if (data[i].almtype == 2) {
                                almtype = "离线";
                            }
                            trHtml += "<tr>";
                            trHtml += "<td>" + data[i].name + "</td>";
                            trHtml += "<td>" + almtype + "</td>";
                            trHtml += "<td>" + data[i].alm_time + "</td>";
                            trHtml += "<td>" + data[i].almsummary + "</td>";
                            trHtml += "</tr>"
                        }
                        $("#result").append(trHtml);

                        // 判断是否加载完了 
                        if (data.length == 0) {
                            dones = true;
                        }
                    }
                    console.log(res);
                }
            });
            return aDataSet;
        }


        
        // 清除列表框数据，使其初始化状态
        function clear(){
            page = 1;
            dones = false;
            $("#result").html("");
        }

        // 当滚动到底部以上200像素，并且不是最后一页时,加载新内容 
        $(window).scroll(function () {
            if ($(document).height() - $(this).scrollTop() - $(this).height() < 200) {
                if (!dones) {
                    console.log("已经是最后一页了");
                    page = page + 1;
                    getDataSet(page, limit, almtype);
                }
            };
        });

        $("#search").click(function () {
            clear();
            almtype = $("#almtype").val();
            var query = $("#query").val();
            getDataSet(page, limit, almtype, query);
        });
    </script>
</body>

</html>